<template>
  <div class="page-container">
    <div class="page-header">
      <h2>课程管理</h2>
    </div>
    
    <div class="operation-container">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-button type="primary" @click="dialogVisible = true">新增课程</el-button>
        </el-col>
        <el-col :span="12">
          <el-input v-model="searchText" placeholder="请输入课程名称搜索" clearable>
            <template #append>
              <el-button :icon="Search" @click="searchCourse"></el-button>
            </template>
          </el-input>
        </el-col>
      </el-row>
    </div>
    
    <div class="table-container">
      <el-table :data="filteredCourseList" border style="width: 100%">
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="name" label="课程名称"></el-table-column>
        <el-table-column prop="courseCode" label="课程代码"></el-table-column>
        <el-table-column prop="semester" label="学期"></el-table-column>
        <el-table-column prop="teacher" label="授课教师"></el-table-column>
        <el-table-column prop="experimentCount" label="实验数量"></el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button type="warning" size="small" @click="editCourse(scope.row)">编辑</el-button>
            <el-button type="danger" size="small" @click="deleteCourse(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    
    <!-- 新增/编辑课程弹窗 -->
    <el-dialog v-model="dialogVisible" :title="isEdit ? '编辑课程' : '新增课程'" width="500px">
      <el-form :model="courseForm" :rules="courseRules" ref="courseFormRef" label-width="100px">
        <el-form-item label="课程名称" prop="name">
          <el-input v-model="courseForm.name"></el-input>
        </el-form-item>
        <el-form-item label="课程代码" prop="courseCode">
          <el-input v-model="courseForm.courseCode"></el-input>
        </el-form-item>
        <el-form-item label="学期" prop="semester">
          <el-select v-model="courseForm.semester" placeholder="请选择学期" style="width: 100%;">
            <el-option label="2021-2022学年第一学期" value="2021-2022-1"></el-option>
            <el-option label="2021-2022学年第二学期" value="2021-2022-2"></el-option>
            <el-option label="2022-2023学年第一学期" value="2022-2023-1"></el-option>
            <el-option label="2022-2023学年第二学期" value="2022-2023-2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="授课教师" prop="teacher">
          <el-input v-model="courseForm.teacher"></el-input>
        </el-form-item>
        <el-form-item label="实验数量" prop="experimentCount">
          <el-input-number v-model="courseForm.experimentCount" :min="1" :max="20"></el-input-number>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitCourseForm">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, computed, onMounted } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { courseApi } from '../utils/api'

export default {
  name: 'CourseManagement',
  setup() {
    // 数据
    const courseList = ref([])
    
    // 加载课程列表
    const loadCourses = async () => {
      try {
        const data = await courseApi.getCourses()
        courseList.value = data || []
      } catch (error) {
        ElMessage.error('获取课程列表失败')
        console.error(error)
      }
    }
    
    // 在组件挂载时加载课程列表
    onMounted(() => {
      loadCourses()
    })
    
    // 搜索相关
    const searchText = ref('')
    const filteredCourseList = computed(() => {
      if (!searchText.value) return courseList.value
      return courseList.value.filter(course => 
        course.name.includes(searchText.value) || 
        (course.courseCode && course.courseCode.includes(searchText.value)) ||
        course.teacher.includes(searchText.value)
      )
    })
    
    const searchCourse = () => {
      // 已经通过计算属性实现了搜索功能
    }
    
    // 课程表单相关
    const dialogVisible = ref(false)
    const isEdit = ref(false)
    const courseForm = reactive({
      id: '',
      name: '',
      courseCode: '',
      semester: '',
      teacher: '',
      experimentCount: 5
    })
    
    const courseRules = {
      name: [{ required: true, message: '请输入课程名称', trigger: 'blur' }],
      courseCode: [{ required: true, message: '请输入课程代码', trigger: 'blur' }],
      semester: [{ required: true, message: '请选择学期', trigger: 'change' }],
      teacher: [{ required: true, message: '请输入授课教师', trigger: 'blur' }]
    }
    
    const courseFormRef = ref(null)
    
    const resetCourseForm = () => {
      courseForm.id = ''
      courseForm.name = ''
      courseForm.courseCode = ''
      courseForm.semester = ''
      courseForm.teacher = ''
      courseForm.experimentCount = 5
      
      if (courseFormRef.value) {
        courseFormRef.value.resetFields()
      }
    }
    
    const editCourse = (row) => {
      isEdit.value = true
      Object.assign(courseForm, row)
      dialogVisible.value = true
    }
    
    const submitCourseForm = async () => {
      if (!courseFormRef.value) return
      
      await courseFormRef.value.validate(async (valid) => {
        if (valid) {
          try {
            if (isEdit.value) {
              // 编辑模式
              await courseApi.updateCourse(courseForm.id, courseForm)
              ElMessage.success('课程编辑成功')
            } else {
              // 新增模式
              await courseApi.createCourse(courseForm)
              ElMessage.success('课程添加成功')
            }
            
            // 重新加载课程列表
            await loadCourses()
            
            dialogVisible.value = false
            resetCourseForm()
            isEdit.value = false
          } catch (error) {
            ElMessage.error(isEdit.value ? '课程编辑失败' : '课程添加失败')
            console.error(error)
          }
        }
      })
    }
    
    const deleteCourse = (row) => {
      ElMessageBox.confirm('确定要删除该课程吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await courseApi.deleteCourse(row.id)
          ElMessage.success('删除成功')
          // 重新加载课程列表
          await loadCourses()
        } catch (error) {
          ElMessage.error('删除失败')
          console.error(error)
        }
      }).catch(() => {})
    }
    
    return {
      courseList,
      filteredCourseList,
      searchText,
      searchCourse,
      Search,
      
      dialogVisible,
      isEdit,
      courseForm,
      courseRules,
      courseFormRef,
      editCourse,
      submitCourseForm,
      deleteCourse
    }
  }
}
</script>

<style scoped>
</style> 